<template>
    <div style="width: 300px;margin-left: 33px;"><el-input v-model="searchText" @change="search"
            style="width: 240px;margin:20px auto;" placeholder="请输入姓名" clearable /></div>
    <div class="demo-collapse" style="width: 90%;margin-left: 5%;">
        <el-collapse accordion>
            <el-collapse-item v-for="it in patientList" :key="patientList.id" :name="it.id">
                <template #title>
                    <b>姓名：</b>{{ it.name }}
                    <span style="margin:auto 10px;"><b>年龄：</b>{{ it.age }}</span>
                    <b>电话：</b>{{ it.phone }}
                    <span style="margin:auto 10px;"><b>预约医生：</b>{{ it.doctorName }}</span>
                    <el-tag v-if="it.visitstatus == 0" type="warning">预约中</el-tag>
                    <el-tag v-else-if="it.visitstatus == 1" type="danger">已取消</el-tag>
                    <el-tag v-else-if="it.visitstatus == 2" type="primary">就诊中</el-tag>
                    <el-tag v-else-if="it.visitstatus == 3" type="success">就诊完成</el-tag>
                    <el-tag v-else type="success" effect="dark">完成</el-tag>
                </template>
                <el-descriptions title="病例详情" :column="3" border>
                    <el-descriptions-item label="姓名" label-align="right" align="center" label-class-name="my-label"
                        class-name="my-content" width="150px">{{ it.name }}</el-descriptions-item>
                    <el-descriptions-item label="电话" label-align="right" align="center">{{ it.phone
                        }}</el-descriptions-item>
                    <el-descriptions-item label="联系地址" label-align="right" align="center">{{ it.address
                        }}</el-descriptions-item>
                    <el-descriptions-item label="预约医生" label-align="right" align="center">{{ it.doctorName
                        }}</el-descriptions-item>
                    <el-descriptions-item label="性别" label-align="right" align="center">
                        <el-tag v-if="it.sex == 1" type="success">男</el-tag>
                        <el-tag v-else type="success">男</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="状态" width="150px" label-align="right" align="center">
                        <el-tag v-if="it.visitstatus == 0" type="warning">预约中</el-tag>
                        <el-tag v-else-if="it.visitstatus == 1" type="danger">已取消</el-tag>
                        <el-tag v-else-if="it.visitstatus == 2" type="primary">就诊中</el-tag>
                        <el-tag v-else-if="it.visitstatus == 3" type="success">就诊完成</el-tag>
                        <el-tag v-else type="success" effect="dark">完成</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="预约日期" width="150px" label-align="right" align="center">
                        {{ it.dob }}
                    </el-descriptions-item>
                    <el-descriptions-item label="病情描述" label-align="right" align="center">
                        {{ it.description }}
                    </el-descriptions-item>
                    <el-descriptions-item label="症状" label-align="right" align="center">
                        {{ it.symptom }}
                    </el-descriptions-item>
                    <el-descriptions-item label="过敏史" label-align="right" align="center">
                        {{ it.allergy }}
                    </el-descriptions-item>
                    <el-descriptions-item label="禁忌" label-align="right" align="center">
                        {{ it.taboo }}
                    </el-descriptions-item>
                    <el-descriptions-item label="处方开局日期" label-align="right" align="center">
                        {{ it.prescriptionDate }}
                    </el-descriptions-item>
                    <el-descriptions-item label="处方明细" label-align="right" align="center">
                        {{ it.perText }}
                    </el-descriptions-item>
                    <el-descriptions-item label="药品明细" label-align="right" align="center">
                       <el-tag v-for="(one,index) in it.medicineList" :key="index" type="success" style="margin: auto 3px;" effect="dark">{{ one.name }}</el-tag>
                    </el-descriptions-item>
                </el-descriptions>
                <div style="margin-top: 20px;">
                    <el-button type="primary" plain :disabled="it.visitstatus == 1 | it.visitstatus == 4 | it.visitstatus == 3"
                        @click="edits(it), isShowEdit = true">编辑信息</el-button>
                    <el-button type="primary" plain
                        :disabled="it.visitstatus == 1 | it.visitstatus == 4 | it.visitstatus == 0| it.visitstatus == 3"
                        @click="usePre(it)">编辑处方</el-button>
                    <el-button type="primary" plain
                        :disabled="it.visitstatus == 1 | it.visitstatus == 4 | it.visitstatus == 0| it.visitstatus == 3"
                        @click="useMed(it)">编辑药品</el-button>
                    <el-popover placement="top" :width="400" trigger="click">
                        <template #reference>
                            <el-button type="warning" plain
                                :disabled="it.visitstatus == 1 | it.visitstatus == 4 | it.visitstatus == 3">编辑状态</el-button>
                        </template>
                        <div>
                            <el-radio-group v-model="checkStatus" size="small">
                                <el-radio-button label="取消" value="1"
                                    :disabled="it.visitstatus == 3 | it.visitstatus == 4" />
                                <el-radio-button label="就诊中" value="2"
                                    :disabled="it.visitstatus == 3 | it.visitstatus == 4" />
                                <el-radio-button label="就诊完成" value="3"
                                    :disabled="it.visitstatus == 0 | it.visitstatus == 1" />
                            </el-radio-group>
                            <el-button type="primary" style="margin-left: 20px;" size="small"
                                @click="updataStatus(it.id)">确定</el-button>
                        </div>
                    </el-popover>
                    <el-button type="success" plain :disabled="it.visitstatus == 1 | it.visitstatus == 4 | it.visitstatus == 0" @click="finish(it.id)">完成</el-button>
                </div>
            </el-collapse-item>
        </el-collapse>
        <!-- 编辑信息框 -->
        <el-dialog title="编辑信息" v-model="isShowEdit" width="35%">
            <el-form :model="formData" style="max-width: 500px" label-width="auto" label-position="right"
                class="demo-form-inline">
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="姓名">
                            <el-input v-model="formData.name" placeholder="请输入姓名" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="年龄" class="right-col">
                            <el-input-number v-model="formData.age" placeholder="年龄" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="电话">
                            <el-input v-model="formData.phone" maxlength="11" show-word-limit placeholder="请输入电话"
                                clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="11" class="right-col">
                        <el-form-item label="性别">
                            <el-radio-group v-model="formData.sex">
                                <el-radio value="1" size="large">男</el-radio>
                                <el-radio value="0" size="large">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="出生日期">
                            <el-date-picker v-model="formData.dob" type="date" placeholder="选择日期" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="11" class="right-col">
                        <el-form-item label="预约日期">
                            <el-date-picker v-model="formData.appointmentDate" type="datetime" placeholder="选择日期"
                                clearable format="YYYY-MM-DD HH:mm:ss" date-format="MMM DD, YYYY" time-format="HH:mm" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="症状">
                            <el-select v-model="formData.symptom" placeholder="选择症状" clearable>
                                <el-option label="Zone one" value="shanghai" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11" class="right-col">
                        <el-form-item label="病情描述">
                            <el-input v-model="formData.description" placeholder="请输入病情描述" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="过敏史">
                            <el-input v-model="formData.allergy" placeholder="请输入过敏史" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="11" class="right-col">
                        <el-form-item label="禁忌">
                            <el-input v-model="formData.taboo" placeholder="请输入禁忌" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="选择医生">
                            <el-select v-model="formData.doctorId" placeholder="选择医生" clearable>
                                <el-option v-for="item in doctorList" :key="item.id" :label="item.name"
                                    :value="item.id" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11" class="right-col">
                        <el-form-item>
                            <el-button style="margin-left: 170px;" type="primary" @click="onChange()">修改</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
        <!-- 编辑处方信息框 -->
        <el-drawer v-model="drawer" title="处方">
            <div>
                <p><span>处方时间：{{ useDate }}</span></p>
                <el-from>
                    <el-from-item>
                        <el-input v-model="textarea" style="width: 260px" :rows="2" type="textarea"
                            :autosize="{ minRows: 6, maxRows: 8 }" placeholder="请输入处方明细" />
                    </el-from-item>
                    <el-from-item>
                        <p>
                            <el-button type="primary" @click="savePre()">保存</el-button>
                        </p>
                    </el-from-item>
                </el-from>
            </div>
        </el-drawer>
        <!-- 编辑药品框 -->
        <el-dialog v-model="medShow" title="Shipping address" width="800">
            <el-form>
                <el-form-item label="药品选择">
                    <el-checkbox-group v-model="type">
                        <el-checkbox v-for="(item,index) in usemedList" :key="index" :value="item.id" name="type">
                            {{ item.name }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="saveMed()">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { patientLists, patientStatu, typeDoctor, patientUpdata, patientPre, medicineLists, patientMed,patientfinish } from '@/views/api';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref } from 'vue'

export default {
    data() {
        return {
            patientList: [],
            searchText: ref(""),
            checkStatus: ref(''),
            formData: {},
            doctorList: [],
            isShowEdit: ref(false),
            drawer: ref(false),
            medShow: ref(false),
            useDate: ref(''),
            prtDoctor: ref(''),
            textarea: ref(''),
            addPre: {},
            type:[],
            usemedList:[]
        }
    },
    methods: {
        search() {
            patientLists({ name: this.searchText }).then(res => {
                this.patientList = res.data.data;
                this.medList = res.data.data.MedicineList
            })
        },
        updataStatus(item) {
            console.log(item, this.checkStatus);
            patientStatu({
                id: item,
                status: this.checkStatus
            }).then(res => {
                if (res.data.data) {
                    ElMessageBox({
                        message: '修改成功',
                        type: 'success'
                    }).then(() => {
                        location.reload();
                    })
                } else {
                    ElMessageBox({
                        message: '修改失败',
                        type: 'error'
                    }).then(() => {
                        location.reload();
                    })
                }
            })
        },
        edits(item) {
            // 深拷贝item对象
            this.formData = Object.assign({}, item)
        },
        onChange() {
            patientUpdata({
                id: this.formData.id,
                name: this.formData.name,
                phone: this.formData.phone,
                age: this.formData.age,
                sex: this.formData.sex,
                dob: this.formData.dob,
                symptom: this.formData.symptom,
                description: this.formData.description,
                allergy: this.formData.allergy,
                doctorId: this.formData.doctorId,
                taboo: this.formData.taboo,
                appointmentDate: this.formData.appointmentDate
            }).then(res => {
                if (res.data.data) {
                    this.dialogFormVisible = false;
                    setTimeout(2000)
                    ElMessageBox({
                        message: '修改成功',
                        type: 'success'
                    }).then(() => {
                        location.reload();
                    })
                } else {
                    ElMessageBox({
                        message: '修改失败',
                        type: 'error'
                    }).then(() => {
                        location.reload();
                    })
                }
            })
        },
        usePre(item) {
            this.drawer = true,
            this.useDate = new Date().toLocaleString(),
            this.addPre = Object.assign({}, item)
        },
        savePre() {
            this.drawer = false
            patientPre({
                id: this.addPre.preId,
                patientId: this.addPre.id,
                doctorId: this.addPre.doctorId,
                prescriptionDate: this.useDate,
                perText: this.textarea
            }).then(res => {
                if (res.data.data) {
                    ElMessageBox({
                        message: '保存成功',
                        type: 'success'
                    }).then(() => {
                        setTimeout(2000)
                        location.reload();
                    })
                } else {
                    ElMessageBox({
                        message: '保存失败',
                        type: 'error'
                    }).then(() => {
                        setTimeout(2000)
                        location.reload();
                    })
                }
            })
        },
        useMed(item){
            this.medShow = true,
            this.addPre = Object.assign({}, item)
        },
        saveMed(){
            patientMed({
                patientId: this.addPre.id,
                preId: this.addPre.preId,
                MedIds:this.type
            }).then(res => {
                if (res.data.data) {
                    ElMessageBox({
                        message: '保存成功',
                        type: 'success'
                    }).then(() => {
                        setTimeout(2000)
                        location.reload();
                    })
                } else {
                    ElMessageBox({
                        message: '保存失败',
                        type: 'error'
                    }).then(() => {
                        setTimeout(2000)
                        location.reload();
                    })
                }
            })
        },
        finish(item){
            patientfinish({id:item}).then(res =>{
                if (res.data.data) {
                    ElMessageBox({
                        message: '成功',
                        type: 'success'
                    }).then(() => {
                        setTimeout(2000)
                        location.reload();
                    })
                } else {
                    ElMessageBox({
                        message: '失败',
                        type: 'error'
                    }).then(() => {
                        setTimeout(2000)
                        location.reload();
                    })
                }
            })
        }
    },
    mounted() {
        patientLists().then(res => {
            this.patientList = res.data.data;
        }),
            typeDoctor({ type: 1 }).then(res => {
                this.doctorList = res.data.data
            }),
            medicineLists().then(res =>{
                this.usemedList = res.data.data
            })
    }
}
</script>

<style></style>